<template>
  <div class="cart">
    <van-nav-bar title="购物车" left-text="编辑" @click-left="onClickLeft" />
    <div class="scroll">
      <div class="cart_ct" v-if="token && goods.length">
        <van-swipe-cell v-for="(item, index) in goods" :key="index">
          <van-checkbox v-model="item.ischeck"></van-checkbox>
          <van-card :thumb="item.url">
            <template #tags>
              <section>
                <h6>{{ item.name }}</h6>
                <p>{{ item.checkName.join("") }}</p>
                <div>
                  <b style="color: red">￥{{ item.price }}</b>
                  <van-stepper v-model="item.buyNum" />
                </div>
              </section>
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
      <img v-else class="imgNo" src="../../assets/img/dp.png" alt="" />
      <my-like></my-like>
    </div>
  </div>
</template>
<script>
import myLike from "../../components/myLike";
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  components: { myLike },
  setup(props) {
    const { state } = useStore();
    const goods = computed(() => state.goodsList);
    let token = localStorage.getItem("token");
    const onClickLeft = () => {
      // 点击编辑的函数
    };
    return {
      onClickLeft,
      goods,
      token,
    };
  },
};
</script>

<style lang="scss" scoped>
:deep(.van-nav-bar__text) {
  color: red;
}
.cart {
  .scroll {
    height: calc(100% - 46px);
    overflow: auto;
  }
  .imgNo {
    width: 100%;
  }
  :deep(.van-swipe-cell__wrapper) {
    display: flex;
    background: #f7f8fa;
    margin-top: 10px;
    padding-left: 10px;
    .van-button {
      height: 100%;
    }
    .van-card {
      flex: 1;
    }
    section {
      flex: 1;
      h6 {
        font-size: 14px;
        margin-top: 10px;
      }
      p {
        color: #999;
        margin: 15px 0;
      }
      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>
